<!--
<template>
  home
</template>
-->
<template>
  <div>
    <el-card>
      <div class="box">
        <img :src="userInfo.avatar" alt="" class="avatar" />
        <div class="bottom">
          <h3 class="title">您好呀！{{ userInfo.userName }}</h3>
          <p class="subtitle">时品卓享运营平台欢迎您！！！</p>
        </div>
      </div>
    </el-card>
    <div class="bottoms" width="600px" height="500px">
      <!-- <svg-icon name="logo">
      </svg-icon> -->
      <img class="logo" src="~@/assets/logo.svg"/>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'
import { useAccount } from '@/pinia/modules/account'

export default defineComponent({
  setup() {
    const userStore = useAccount()
    const userInfo = userStore.userinfo
    return {
      userStore,
      userInfo,
    }
  },
})
</script>

<style scoped lang="scss">
.box {
  display: flex;
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .bottom {
    margin-left: 20px;
    .title {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 30px;
    }
    .subtitle {
      font-style: italic;
      color: skyblue;
    }
  }
}
.bottoms {
  display: flex;
  justify-content: center;
}
</style>